<template>
	<view class="page">

		<custom-navigation title="盘点历史" rightImg="/static/add.png"
			@rightAction="$navigateTo('/pages/inventory/inventory-add')">
		</custom-navigation>

		<view class="flex-row-center"
			style="background-color: #38C09EFF;padding-top: 20rpx;padding-left: 24rpx;padding-bottom: 22rpx;">
			<view class="search-box flex-row-center">
				<image src="/static/search.png"></image>
				<input placeholder="盘点单号/操作员" placeholder-style="color:#999999" v-model="searchStr"
					@confirm="doSearch" confirm-type="search" type="text" @keydown.enter="doSearch" />
			</view>
			<view class="fliter-box"  @click="$navigateTo('/pages/warehousing/date-filter')">
				<image src="/static/filter.png"></image>
				<text>筛选</text>
			</view>
		</view>

		<view class="tab-box flex-row">
			<view v-for="(item,index) in tabtitle" class="item flex-column-center" @click="tabSwitch(index)">
				<view :class="index==tabindex?'checktxt':'unchecktxt'">{{item}}
					<view class="bubble" v-if="counts[index]!=0">{{counts[index]}}</view>
				</view>
				<view class="in" v-if="index==tabindex"></view>
			</view>
		</view>
		<scroll-view class="body-scroll" scroll-y="true" @scrolltolower="loadMoreData">
			<view class="item-view flex-column" v-for="(item,index) in datas" @click="itemOnClick(item)">
				<view class="flex-row-center">
					<view class="name">{{item.create_user_disp}} </view>
					<view class="datetime">{{item.modify_time}} </view>
				</view>
				<view class="line"></view>
				<view class="flex-row-center">
					<view class="bh">{{item.inventory_no}} </view>
					<view :class="item.inventory_state=='已提交'?'bluebtn':'redbtn'">{{item.inventory_state}} </view>
				</view>

			</view>
		</scroll-view>
		<mx-date-picker :show="showPicker" type="range" :value="value" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				tabindex: 0,
				tabtitle: ["全部", "未提交", "已提交"],
				datas: [],
				page: 1,
				searchStr: '',
				counts: [0, 0, 0],
				start_time: '',
				end_time: '',
				showPicker: false,
				date: '2019/01/01',
				time: '15:00:12',
				datetime: '2019/01/01 15:00:12',
				range: ['2019/01/01', '2019/01/06'],
				rangetime: ['2019/01/08 14:00', '2019/01/16 13:59'],
				type: 'rangetime',
				value: ''
			}
		},
		onLoad() {
		},
		onShow() {
			if (uni.getStorageSync("refresh")) {
				uni.setStorageSync("refresh", null)
				this.page = 1;
			}
			this.getData(this.tabindex)
			
			if(uni.getStorageSync("query-date")){
				let e =uni.getStorageSync("query-date")
				this.onSelected(e)
				uni.setStorageSync("query-date", null)
			}
			this.getCounts()
		},
		methods: {
			getCounts() {
				this.getData(0, true)
				this.getData(1, true)
				this.getData(2, true)
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);

					this.start_time = e.value[0].replaceAll("/", "-")
					this.end_time = e.value[1].replaceAll("/", "-")+" 23:59"
					this.page = 1;
					this.getData(this.tabindex)
					this.getCounts()
				}
			},
			itemOnClick(item) {
				let info = JSON.stringify(item)

				this.$navigateTo('/pages/inventory/inventory-detail?info=' + info)
			},
			tabSwitch(index) {
				this.tabindex = index;
				this.page = 1;
				this.getData(index);
			},
			doSearch() {
				this.page=1;
				this.getData(this.tabindex)
				this.getCounts()
			},
			loadMoreData() {
				this.page++;
				this.getData(this.tabindex)
			},
			getData(index,isCount) {
				let condition = [];

				if (this.searchStr.length > 0) {
					condition.push({
						"colName": "store_name",
						"ruleType": "like",
						"value": this.searchStr
					})
				}

				if (index != 0) {
					condition.push({
						"colName": "type",
						"ruleType": "like",
						"value": index == 1 ? "待提交" : "已提交"
					})
				}

				uni.showLoading({
					title: "加载中..."
				})

				let params = {
					"serviceName": "srvretail_inventory_select",
					"colNames": ["*"],
					"condition": [],
					"page": {
						"pageNo": this.page,
						"rownumber": 20
					}
				};
				let relation_condition = {
					"data": [],
					"relation": "AND"
				};
				if (this.searchStr.length > 0) {
					relation_condition.data.push({
						"relation": "OR",
						"data": [{
							"colName": "inventory_no",
							"ruleType": "[like]",
							"value": this.searchStr
						}, {
							"colName": "create_user_disp",
							"ruleType": "[like]",
							"value": this.searchStr
						}]
					})
				}
				if (this.start_time.length > 0) {
					relation_condition.data.push({
						"relation": "AND",
						"data": [{
							"colName": "create_time",
							"ruleType": "ge",
							"value": this.start_time
						}, {
							"colName": "create_time",
							"ruleType": "le",
							"value": this.end_time
						}]
					})
				}

				if (index != 0) {
					relation_condition.data.push({
						"relation": "AND",
						"data": [{
							"colName": "inventory_state",
							"ruleType": "in",
							"value": index == 1 ? "待提交" : "已提交"
						}]
					})
				}
				params.relation_condition = relation_condition;


 


				this.$apiPost("/retail/select/srvretail_inventory_select", params).then(res => {
					
					this.counts[index] = res.page.total
					this.counts = Object.assign({}, this.counts);
					uni.hideLoading()
					if (isCount) return;
					if (this.page == 1)
						this.datas = res.data;
					else {
						if (res.data.length == 0) {
							uni.showToast({
								title: "没有更多数据了。",
								icon: 'none'
							})
						}
						this.datas.push(...res.data)
					} 
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fliter-box {
		margin-right: 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 40rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}
	}

	.search-box {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFFFFF;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-left: 39rpx;

		}

		input {
			flex: 1;
			font-size: 14px;
			font-weight: 500;
			margin-left: 8rpx;
			color: #000;
		}
	}

	.tab-box {
		height: 100rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);
		justify-content: center;
		padding-left: 72rpx;
		padding-right: 72rpx;

		.item {
			padding-top: 32rpx;
			flex: 1;

			.bubble {

				min-width: 24rpx;
				height: 24rpx;
				background: rgba(212, 48, 48, 1);
				color: white;
				font-size: 20rpx;
				line-height: 24rpx;
				border-radius: 12rpx;
				font-weight: 500;
				text-align: center;
				top: -13rpx;
				right: -20rpx;
				position: absolute;

			}

			.unchecktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}

			.checktxt {
				position: relative;
				font-size: 30rpx;
				font-weight: 700;
				color: rgba(56, 192, 158, 1);
			}

			.in {
				margin-top: 4rpx;
				width: 48rpx;
				height: 6rpx;
				background-color: rgba(56, 192, 158, 1);
				;
				border-radius: 3rpx;
			}
		}
	}

	.item-view {
		padding: 16rpx 0;
		width: 702rpx;
		margin-left: 24rpx;
		margin-top: 24rpx;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 1);

		.name {
			flex: 1;
			font-size: 14px;
			font-weight: 500;
			margin-left: 22rpx;
		}

		.datetime {
			font-size: 12px;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			margin-right: 24rpx;
		}

		.line {
			height: 2rpx;
			width: 100%;
			background-color: rgba(245, 245, 247, 1);
			margin: 16rpx 0;
		}

		.bh {
			margin-left: 22rpx;
			flex: 1;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
		}

		.bluebtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(56, 192, 158, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(56, 192, 158, 1);
		}

		.redbtn {
			width: 124rpx;
			height: 48rpx;
			text-align: center;
			line-height: 48rpx;
			border-radius: 4rpx;
			border: 2rpx solid rgba(212, 48, 48, 1);
			margin-right: 22rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(212, 48, 48, 1);
		}

	}
</style>
